import {Avatar, Card, List, Tag} from "antd";
import React, {useEffect, useState} from "react";
import './index.scss'
import {useNavigate} from "react-router-dom";
// 侧边栏信息
import {
    AlignRightOutlined, EditOutlined, ReadOutlined, SettingOutlined, SkinOutlined, SnippetsOutlined, StarOutlined
} from "@ant-design/icons";
import {Outlet} from "react-router-dom";


const Me = () => {
    // 获取头像
    const [avatar, setAvatar] = useState({})
    useEffect(() => {
        const data = JSON.parse(localStorage.getItem("admin"))
        setAvatar(data)
    }, []);

// 给侧边栏添加跳转事件
    const navigate = useNavigate()
    const handleClick = (e) => {
        navigate(e.path)
    }
    const SiderItems = [{
        title: '我的主页', icon: <AlignRightOutlined/>, path: '/system/me'
    }, {
        title: '修改密码', icon: <EditOutlined/>, path: '/system/me/password'
    }, {
        title: '我的笔记', icon: <SnippetsOutlined/>, path: '/system/me/article'
    }, {
        title: '我的设置', icon: <SettingOutlined/>, path: '/system/me/setting'
    }, {
        title: '我的收藏', icon: <StarOutlined/>, path: '/system/me/star'
    }, {
        title: '我的评论', icon: <ReadOutlined/>, path: '/system/me/comment'
    }, {
        title: '更换头像', icon: <SkinOutlined/>, path: '/system/me/avatar'
    }]
    return (<div style={{display: 'flex', overflow: 'hidden'}}>
        <Card
            style={{width: '100%', height: 620}}>
            <Outlet/>
        </Card>

        <Card
            style={{
                background: '#81a8cd',
                width: 200,
                height: 620,
                display: 'flex',
                flexDirection: 'column',
                justifyContent: "center",
                alignItems: 'center',
            }}>
            <div style={{display: 'flex', alignItems: 'end', width: 200, justifyContent: 'center'}}>
                <Avatar style={{border: '3px solid #fff', textAlign: 'center'}} size={100}
                        src={`http://127.0.0.1:3031/${avatar.imgPath}`}></Avatar>
                <Tag color="blue" style={{height: 20, marginBottom: 5}}>管理员</Tag>
            </div>
            <div>
                <p style={{marginLeft: 10, fontSize: 14, color: '#fff'}}>昵称：{avatar?.username}</p>
                <p style={{marginLeft: 10, fontSize: 14, color: '#fff'}}>简介：暂无简介~~</p>
            </div>
            <div className={'slider_layout'}>
                {SiderItems && SiderItems.map(item => {
                    return (
                        <div key={item.title}>
                            <p key={item.title}
                               onClick={() => handleClick(item)}
                               style={{
                                   width: 200,
                                   cursor: "pointer",
                                   textAlign: 'center'
                               }}
                            >
                                <span style={{marginRight: 10}}>{item.icon}</span>
                                {item.title}</p>
                        </div>
                    )
                })}
            </div>
        </Card>
    </div>)
}

export default Me